import { Image } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import ProForm, {
  ProFormSelect,
  ProFormText,
  ProFormDigit,
  ProFormList,
} from "@ant-design/pro-form";
import useCommonTable from "@/hooks/useCommonTable";

import { fetchList, add, update, remove } from "@/api/teacher";
import UploadFile from "@/components/UploadFile";
import EditableLabels from "@/components/EditableLabels";
import { teacherTypeOptions } from "@/const";
import Editor from "@/components/Editor";

const Teacher = () => {
  const columns = [
    {
      title: "类型",
      dataIndex: "type",
      valueType: "select",
      fieldProps: {
        options: teacherTypeOptions,
      },
    },
    {
      title: "老师照片",
      dataIndex: "img",
      search: false,
      render: (_, record) => {
        return <Image width={50} height={50} src={record.img} />;
      },
    },
    {
      title: "姓名",
      dataIndex: "name",
      search: false,
    },
    {
      title: "手机号码",
      dataIndex: "phone",
      search: false,
    },
    {
      title: "学历",
      dataIndex: "degree",
      search: false,
    },
    {
      title: "学校",
      dataIndex: "school",
      search: false,
    },
    {
      title: "擅长",
      dataIndex: "adept",
      search: false,
      render: (_, record) => {
        return record?.adept.join("、");
      },
    },
    {
      title: "金额",
      dataIndex: "price",
      search: false,
    },
  ];

  const renderFormItem = ({ type, formRef }) => {
    return (
      <>
        <ProFormSelect
          name="type"
          label="类型"
          allowClear
          fieldProps={{
            options: teacherTypeOptions,
          }}
          rules={[{ required: true, message: "请选择类型" }]}
        />
        <ProFormText
          label="姓名"
          name="name"
          rules={[
            { required: true, message: "请输入姓名" },
            {
              max: 50,
              message: "最长为50位",
            },
          ]}
        />
        <ProForm.Item
          name="img"
          label="照片"
          tooltip="建议尺寸：750*750"
          rules={[{ required: true, message: "请上传图片" }]}
        >
          <UploadFile />
        </ProForm.Item>
        <ProFormDigit
          label="金额"
          name="price"
          placeholder="请输入金额"
          fieldProps={{
            precision: 2,
          }}
          rules={[{ required: true, message: "请输入金额" }]}
        />
        <ProFormText
          label="手机"
          name="phone"
          placeholder="请输入手机号码"
          rules={[
            {
              required: true,
              message: "请输入手机号码",
            },
            {
              pattern:
                /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
              message: "手机号码格式错误",
            },
          ]}
        />
        <ProFormText
          label="学历"
          name="degree"
          rules={[
            { required: true, message: "请输入学历" },
            {
              max: 50,
              message: "最长为50位",
            },
          ]}
        />
        <ProFormText
          label="学校"
          name="school"
          rules={[
            { required: true, message: "请输入学校" },
            {
              max: 50,
              message: "最长为50位",
            },
          ]}
        />

        <ProFormList
          name="adept"
          label="擅长"
          rules={[
            {
              required: true,
              validator: async (_, value) => {
                if (value && value.length > 0) {
                  return;
                }
                throw new Error("至少要有一项！");
              },
            },
          ]}
          copyIconProps={false}
          max={4}
          creatorButtonProps={{
            style: { width: 440 },
            creatorButtonText: "新增",
          }}
        >
          <ProFormText
            key="name"
            name="name"
            width="lg"
            rules={[
              { required: true, message: "请输入" },
              {
                max: 10,
                message: "最长为10位",
              },
            ]}
          />
        </ProFormList>

        {/* <ProForm.Item
          name="adept"
          label="擅长"
          rules={[{ required: true, message: "请设置擅长内容" }]}
        >
          <EditableLabels />
        </ProForm.Item> */}

        <ProForm.Item name="content" label="详情">
          <Editor />
        </ProForm.Item>
      </>
    );
  };

  return (
    <PageContainer>
      {useCommonTable({
        title: "",
        columns,
        renderFormItem,
        modalWidth: 1000,
        fetchList,
        add,
        update,
        remove,
        actionColumnWidth: 200,
        showCheckbox: false,
        layout: "horizontal",
        transformGetData: (record) => {
          return {
            ...record,
            adept: record?.adept?.map((item) => ({ name: item })),
            detailImg: record?.detailImg?.map((item) => {
              return {
                url: item,
              };
            }),
          };
        },
        transformPostData: (values) => {
          return {
            ...values,
            adept: values.adept?.map((item) => item.name),
            detailImg: values?.detailImg?.map((item) => item.url),
          };
        },
      })}
    </PageContainer>
  );
};

export default Teacher;
